<template>
    <div class="register">
        <div class="bgp"></div>
        <div class="register_slogan">
            <img src="../assets//tjise_slogan.png" alt="">
        </div>
        <div class="register_container">
            
            <img src="../assets/tjise.png" class="img-responsive" alt="Image">
            
            <!-- <h1 class="title">学校管理系统</h1> -->
            <!-- 表单  绑定对象、绑定验证规则、监听回车键 -->
            <el-form class="register_form" 
                ref="ref_form"
                :model="userInfo"  
                :rules="rules" 
                @key.enter="onRegister">
                <el-form-item prop="username">
                    <el-input placeholder="请输入用户名" v-model.trim="userInfo.username">
                        <template #prepend>
                            <el-icon>
                                <avatar />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item prop="password">
                    <el-input placeholder="请输入密码" show-password v-model.trim="userInfo.password">
                        <template #prepend>
                            <el-icon>
                                <key />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-button type="primary" class="register_submit" @click="onRegister">注册</el-button>
                <div class="register_login" @click="OnLogin"><span>去登录</span></div>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue'
import route from '../routers/index'
// 引入注册接口
import { getRegister } from '../api/index'


// 声明数据对象
const userInfo = reactive({
    username: '',
    password: ''
})
// 初始化ref
const ref_form = ref(null)
// 表单验证规则
const rules = {
    username: [
        { required: true, message: '用户名不能为空', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
    ],
}
// 登录方法
const onRegister = () => {
    console.log(userInfo)
    // 表单验证 
    ref_form.value.validate((val) => {
        // val 用户名和密码的验证结果，为 true 时，说明都不为空，验证通过,为 false 时，验证不通过
        if(val){
            // 执行登录提交
            getRegisterData()
        }
    })
}
// 注册提交操作
const getRegisterData = async() => {
    // 调用注册接口  后续写
    const res = await getRegister({
        name:userInfo.username,
        pwd:userInfo.password
    })
    if(res?.msg){
        // 注册成功
        ElMessage({
            message: '注册成功',
            type: 'success',
        })
        // 跳转到首页
        route.push('/login')
    }
}

const OnLogin = () => {
    // 跳转到登录页
    route.push('/login')
}

</script>
<style lang="less" scoped>
.register{
    height: 100%;
    .bgp{
        height: 100%;
        background-image: url("../assets/login_bg.jpg");
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: 50% 50%;
    }
    .register_slogan{
        position: absolute;
        top: 30%;
        left: 25%;
        transform: translate(-50%,-50%);
        .img-responsive{
            width: 100%;
        }
    }
    .register_container{
        position: absolute;
        width: 400px;
        top: 30%;
        left: 70%;
        transform: translate(-50%,-50%);
        background-color: rgba(125, 125, 125, 0.5);
        border-radius: 10px;
        padding: 30px;
        text-align: center;
        .tjise{
            height: 100%;
            margin-bottom: 20px;
        }
        .register_form{
            padding-top: 20px;
            width: 314px;
            text-align: center;
            margin: 0 auto;
            .register_submit {
                width: 100%;
                height: 50px;
                font-size: 16px;
                background-color: #273896;
                // border-radius: 20px;
                margin-bottom: 10px;
            }
        }
        .register_login{
            span{
                font-size: 12px;
                margin: 5px 0;
                color: #fff;
            }
        } 
        
    }

}

</style>